<template>
  <div class="box">
    <div class="content">
      <div class="contents">
        <!-- 挥手图片 -->
        <img src="../../lib/img/loginAndregister/hand@2x.png" alt="" style="width:.68rem;height:.53rem;" class="img">
        <!-- Hi，欢迎你回来 -->
        <p class="HI">Hi，欢迎你回来</p>
        <!-- 表单 -->
        <van-form class="formlist">
            <van-field
              v-model="tel"
              label="手机号"
              name="validator"
              placeholder="请输入你的手机号"
              clearable
              :rules="[{ validator, message: '请输入正确手机号' }]"
              style="margin-bottom:.20rem;margin-top:.15rem;"
            />
            <van-field
              v-model="telCode"
              placeholder="请输入验证码"
              clearable
            >
              <template #button>
                <van-button size="small" type="primary" class="code" @click="CodeFn">获取验证码</van-button>
              </template>
            </van-field>
            <div style="margin: .2rem .16rem;">
              <van-button round block type="info" native-type="submit" class="sub" @click="Submit">
                登录
              </van-button>
            </div>
        </van-form>
        <!-- 用户协议 -->
        <p class="Agreement">登录即代表同意
          <a @click="$router.push('/UserAgreement')">用户协议</a>
        </p>
        <!-- 其他登录方式 -->
        <!-- <div class="OtherLogins">
          <van-divider class="tit">其他登录方式</van-divider>
          <div class="Other">
            <img src="../../lib/img/loginAndregister/WeChat@2x.png" alt="" @click="WeChatFn" >
            <img src="../../lib/img/loginAndregister/qq@2x.png" alt="" @click="QQFn" >
            <img src="../../lib/img/loginAndregister/micro-blog@2x.png" alt="" @click="MicroBlogFn" >
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
// 直接导入axios请求其他接口数据
import axios from 'axios'
// 但如数据请求的模块
import { PhoneCode, LiginRegister } from '@/api'
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { Form, Field, Button, Toast, Divider } from 'vant'
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Divider)
export default {
  // 设置data初始值
  data () {
    return {
      id: '',
      tel: '',
      telCode: ''
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    // 手机号正则函数验证
    validator (val) {
      return /^1[3456789]\d{9}$/.test(val)
    },
    // 获取短信验证码按钮
    CodeFn () {
      // console.log(this.tel)
      if (/^1[3456789]\d{9}$/.test(this.tel)) {
        PhoneCode({ phone: this.tel }).then((res) => {
          console.log(res)
          // console.log(res.data.code)
          console.log(res.data.data.para)
          // 为了方便先直接把状态码填进去,后期把这个删掉即可
          if (res.data.code === 1) {
            Toast('短信验证码发送成功,请五分钟之内验证')
            this.telCode = res.data.data.para
          } else {
            Toast('短信验证码发送失败,请重试')
          }
        })
      } else {
        Toast('请输入短信验证码')
      }
    },
    // 登录按钮
    Submit () {
      // 先验证手机号和验证码是否为空,然后最后在可以提交
      if (this.tel.length === 0 || !/^1[3456789]\d{9}$/.test(this.tel)) {
        Toast('请输入正确手机号')
      } else if (this.telCode.length < 0 || this.telCode.length > 4) {
        Toast('请输入正确验证码')
      } else {
        // Toast('注册/登录')
        // console.log(this.tel)
        // console.log(this.telCode)
        // 登录成功后从后端接收到数据等之后,将localStroage中的登录状态更改一下,并跳转到首页
        LiginRegister({
          phone: this.tel,
          code: this.telCode
        }).then((res) => {
          console.log(res)
          if (res.data.code === 200) { // 登录成功
            this.id = res.data.data.user_id
            // 保存登录状态
            localStorage.setItem('lazypigislogin', 'true')
            // 保存个人信息
            localStorage.setItem('lazypiguserid', res.data.data.user_id)
            localStorage.setItem('lazypigtoken', res.data.data.token)
            // 登录成功以后,根据id值使用axios调用自己写得后端根据id值注册小懒猪项目中的头像得接口
            axios({
              method: 'post',
              url: 'http://60.205.153.211:3000/api/lazypig/lazypigregisteravatar',
              params: {
                userid: res.data.data.user_id
              }
            }).then((res) => {
              // console.log('1111', res)
            })
            // 登录成功以后axios调用这个接口,自动根据id值在数据库中创建用户图标信息
            axios({
              method: 'get',
              url: 'http://60.205.153.211:3000/api/lazypigIcon/GenerateIcon',
              params: {
                userid: res.data.data.user_id
              }
            }).then((res) => {
              // console.log('2252', res)
            })
            Toast('登录成功即将跳转至首页')
            setTimeout(() => {
              this.$router.replace('/home')
            }, 1000)
          } else {
            Toast('登录失败,请验证信息是否填写正确')
          }
        })
      }
    }
    // // 微信登录
    // WeChatFn () {
    //   Toast('此功能正在开发中请耐心等待')
    // },
    // QQFn () {
    //   Toast('此功能正在开发中请耐心等待')
    // },
    // MicroBlogFn () {
    //   Toast('此功能正在开发中请耐心等待')
    // }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  @import "@/lib/reset.scss";
  .contents {
    // 宽高
    @include rect(100%, auto);
    // 溢出显示滚动条
    @include overflow(auto);
    @include gradient(linear, top, (#ffca65,#fca351));
    @include fullscreen(relative);
    // 挥手图片
    .img {
      position: absolute;
      top: 1rem;
      left: .3rem;
    }
    // Hi,欢迎你回来
    .HI {
      position: absolute;
      height: .35rem;
      top: 1.02rem;
      left: 1.10rem;
      font-size: .27rem;
      color: #FBFBFB;
    }
    // 表单
    .formlist {
      @include rect(3.45rem, auto);
      position: absolute;
      top: 1.51rem;
      left: .15rem;
      @include border-radius(.2rem);
      background-color: white;
      padding: 0 .15rem;
      // 获取验证码按钮
      .code {
        min-width: .60rem;
        height: .30rem;
        background-color: white;
        color: #cbcbcc;
        border: 0;
        .van-button__text {
          font-size: .14rem;
        }
      }
      // 提交登录按钮
      .sub {
        @include rect(2.74rem, .45rem);
        @include gradient(linear, top, (#ffcb66 ,#fda452));
        border: 0;
        margin-top: .25rem;
      }
      // 输入框
      /deep/ .van-cell {
        border-bottom: .005rem solid #f5f5f7;
        font-size: .15rem;
        // lable
        /deep/ .van-field__label {
          width: .60rem;
        }
      }
      // 错误提示文字
      /deep/ .van-field__error-message {
        font-size: .12rem;
      }
    }
    // 登录即代表同意
    .Agreement {
      height: .20rem;
      position: absolute;
      line-height: .20rem;
      top: 3.85rem;
      left: 2.22rem;
      font-size: .12rem;
      color: #fce4c4;
    }
    // 其他登录
    .OtherLogins {
      @include rect(3.0rem, 1.0rem);
      position: absolute;
      // top: 5.0rem;
      bottom: .20rem;
      left: .40rem;
      .van-divider {
        font-size: .14rem;
      }
      .Other {
        @include flexbox(flex);
        @include justify-content(space-around);
        @include align-content();
        margin-top: .15rem;
        img {
          width: .43rem;
          height: .35rem;
        }
      }
    }
  }
</style>
